<template>
	<sl-page title="提现">
		<view class="withdrawal">
			<view class="withdrawal-head">
				<view class="f-n f-24">
					可提现
				</view>
				<Money :priceValue="cashs" :activeClass="['money-60']"></Money>
			</view>
			<view class="withdrawal-body">
				<view class="f-w m-b40">
					提现金额
				</view>
				<view class="flex flex-y-center">
					<view class="f-w px-r-1">
						￥
					</view>
					<uni-easyinput :inputBorder="false" type="number" v-model="form.amount" maxlength="30"
						placeholder="请输入提现金额"></uni-easyinput>
					<!-- <input class="" type="text" v-model="form.amount" maxlength="30" placeholder="请输入提现金额" /> -->
				</view>
				<view class="bottom-line"></view>
				<view class="flex flex-x-between m-b80">
					<view class="f-w">
						提现至
					</view>
					<view class="flex" @click="onSelectBankCards()">
						<view class="f-tip">
							<block v-if="form.bankNumber">
								{{form.bankNumber}}
							</block>
							<block v-else>
								银行卡转账
							</block>
						</view>
						<uni-icons type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="btn-primary" @click.stop="onSubmit()">确认提现</view>
			</view>
			<view class="withdrawal-description">
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
				提现说明
			</view>
		</view>
	</sl-page>
</template>

<script>
	import CashApi from '@/api/finance/cash.js';
	import Constants from '@/constants';
	import * as Verify from '@/utils/verify';
	import Money from '@/pages/components/money/money.vue';
	//
	export default {
		//
		name: 'withdrawal',
		//
		mixins: [Constants],
		//
		components: {
			Money
		},
		//
		data() {
			return {
				cashs: '0',
				result: {},
				form: {
					amount: '',
					bankNumber: '',
					cashModel: '2',
					accountId: ''

				},
				verifyPassed_amount: false,
				verifyPassed_bankNumber: false,

			};
		},
		//
		watch: {
			'form.amount': function() {
				this.verifyPassed_amount = this.VerifyAmount();
			},
			'form.bankNumber': function() {
				this.verifyPassed_bankNumber = this.VerifyBankNumber();
			},
		},
		//
		computed: {
			verifyPassed: function() {
				return this.verifyPassed_amount && this.verifyPassed_bankNumber;
			}
		},
		//
		onLoad({
			cashs
		}) {
			this.cashs = cashs;
		},
		//
		onShow() {},
		//
		methods: {
			//
			VerifyAmount: function() {
				return !Verify.isEmpty(this.form.amount);
			},
			//
			// VerifyMaxAmount: function() {
			// 	return !Verify.compareValues(this.form.amount, this.cashs);
			// },
			//
			VerifyBankNumber: function() {
				return !Verify.isEmpty(this.form.bankNumber);
			},
			//
			onSubmit() {
				if (!this.VerifyAmount()) {
					this.$app.toast('请输入提现金额')
					return;
				}
				// if (!this.VerifyMaxAmount()) {
				// 	this.$app.toast('提现金额超出可提现范围')
				// 	return;
				// }
				if (!this.VerifyBankNumber()) {
					this.$app.toast('请选择银行卡号')
					return;
				}
				// 提交
				this.doSubmit();
			},
			//
			doSubmit() {
				CashApi.apply(this.form).then((res) => {
					console.log('res:---------------xxx ',res);
					this.result.msg = res.msg;
					this.result.success = res.success
					this.result.accountName = res.obj.accountName;
					this.result.amount = res.obj.amount;
					this.$app.navTo(this.pages.resultAccountPage, this.result);
				});
			},
			//选择银行卡
			onSelectBankCards() {
				this.$app.navTo(this.pages.bankCardsAccountPage, {
					isSelectBankCards: true
				});
			},
			//选择银行卡地址回调
			getBankCardsCallback(item) {
				this.form.accountId = item.id;
				let cardNo = item.cardNo;
				let lastFourChars = cardNo.substring(cardNo.length - 4);
				this.form.bankNumber = item.bankName + '（' + lastFourChars + '）'
			},
		}
	};
</script>

<style lang="scss" scoped>
	.withdrawal {
		font-size: $uni-font-size-base;
		color: $uni-text-color-primary;
		padding: 0rpx 32rpx;

		.withdrawal-head {
			margin-top: 40rpx;
			margin-left: 32rpx;
		}

		.withdrawal-body {
			margin-top: 36rpx;
			padding: 24rpx 32rpx;
			height: 255px;
			flex-shrink: 0;
			border-radius: 10px;
			background: #FFF;
			box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
		}

		.withdrawal-description {}
	}
</style>